<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2017/10/23 0023
  Time: 上午 11:02
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<link rel="stylesheet" href="/static/plugins/layui/css/layui.css">
<link rel="stylesheet" href="/static/css/commom.css">
<html>
<head>
    <title>添加用户</title>
    <style>
        .box-padding-15 {
            padding: 15px;
        }
    </style>
</head>
<body>
<div class="layui-box box-padding-15">
        <div class="box-padding-15">
    <span class="layui-breadcrumb">
        <a href="/" target="_top">首页</a>
        <a href="/account">用户管理</a>
        <a><cite>添加</cite></a>
    </span>
        </div>

<div class="form-style">
    <form class="layui-form" action="/account/save" method="post">
        <div class="layui-form-item">
            <label class="layui-form-label">用户名：</label>
            <div class="layui-input-block">
                <input type="text" name="userName"   lay-verify="required|username" placeholder="请输入用户名" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码：</label>
            <div class="layui-input-block">
                <input type="password" name="userPwd"   lay-verify="required|pass" placeholder="请输入密码" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">职位：</label>
            <div class="layui-input-block">
                <input type="text" name="nickName"   lay-verify="required|username" placeholder="请输入职位" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">姓名：</label>
            <div class="layui-input-block">
                <input type="text" name="realName"  lay-verify="required|username" placeholder="请输入姓名" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">手机号码：</label>
            <div class="layui-input-block">
                <input type="text" name="mobile"   lay-verify="required|phone|number" placeholder="请输入电话号码" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">工号：</label>
            <div class="layui-input-block">
                <input type="text" name="personId" lay-verify="required" placeholder="请输入工号" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">状态：</label>
            <div class="layui-input-block">
                <input type="checkbox" lay-filter="checkbox" name="userState" value="1" title="解冻">
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">用户描述：</label>
            <div class="layui-input-block">
                <textarea name="remark" placeholder="请输入内容" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item" id="deptDiv">
            <label class="layui-form-label">选择部门：</label>
            <div class="layui-input-block">
                <select name="deptId" id="dept"  lay-filter="dept" lay-verify="required">
                    <option value="-1">--请选择部门--</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item" id="roleDiv">
            <label class="layui-form-label">选择角色：</label>
            <div class="layui-input-block">
                <select name="roleId" id="type"  lay-filter="type" lay-verify="required">
                    <option value="-1">--请选择角色--</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">添加人员：</label>
            <div class="layui-input-block">
                <input type="text" name="addUser" lay-verify="required|username" placeholder="请输入添加人员" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" >
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit lay-filter="formDemo">完成</button>
                <a href="/account"><button type="button" class="layui-btn layui-btn-primary">取消</button></a>
            </div>
        </div>
    </form>
</div>
</div>

<script src="/static/plugins/jquery.js"></script>
<script src="/static/plugins/layui/layui.js"></script>
<script>
    layui.use(['form','element'], function(){
        var form = layui.form;

        $.ajax({
            url:"/account/dept",
            type:"get",
            dataType:"json",
            success:function (data) {
                if (data.code ==1){
                    var $dept = $('#deptDiv').find('select');
                    var depts = data.data;
                    $.each(depts,function (i, item) {
                        $dept.append("<option value='"+item.deptId+"'>"+item.deptName+"</option>");
                    })
                    form.render('select'); //刷新select选择框渲染
                }else {
                    console.log(data.message);
                }
            },
            error:function (data) {
                console.log(data.message);
            }
        })

        $.ajax({
            url:"/account/role",
            type:"get",
            dataType:"json",
            success:function (data) {
                if (data.code ==1){
                    var $role = $('#roleDiv').find('select');
                    var roles = data.data;
                    $.each(roles,function (i, item) {
                        $role.append("<option value='"+item.roleId+"'>"+item.roleName+"</option>");
                    })
                    form.render('select'); //刷新select选择框渲染
                }else {
                    console.log(data.message);
                }
            },
            error:function (data) {
                console.log(data.message);
            }
        })

        form.verify({
            username: function(value, item){ //value：表单的值、item：表单的DOM对象
                if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
                    return '用户名不能有特殊字符';
                }
                if(/(^\_)|(\__)|(\_+$)/.test(value)){
                    return '用户名首尾不能出现下划线\'_\'';
                }
                if(/^\d+\d+\d$/.test(value)){
                    return '用户名不能全为数字';
                }
                var unique = false;
                $.ajax({
                    url: "/account/verify/name",
                    data:{name : value},
                    dataType:"json",
                    async:false,
                    success:function(msg){
                        if(msg.code == 1) {
                            unique = msg.data;
                        }
                    },
                    error:function(){
                        console.log("校验用户名唯一性失败");
                    }
                });
                if(unique) {
                    return "用户名已存在";
                }
            }

            //我们既支持上述函数式的方式，也支持下述数组的形式
            //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
            ,pass: [
                /^[\S]{6,12}$/
                ,'密码必须6到12位，且不能出现空格'
            ]
        });

       /* form.on('submit(formDemo)', function(data){

        });*/
    });
</script>
</body>
</html>
